<template>
  <el-dialog
    :title="id ? '编辑优惠券' : '添加优惠券'"
    :visible.sync="visible"
    width="550px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form ref="couponForm" size="small" :rules="rules" :model="form" label-width="100px">
      <el-form-item label="名称" prop="coupon_name">
        <el-input v-model="form.coupon_name" />
      </el-form-item>
      <el-form-item v-if="status == 1" label="优惠券分类" prop="scope">
        <el-cascader
          v-model="form.scope"
          size="small"
          :options="kindList"
          :props="casProps"
          expand-trigger="hover"
          clearable
        />
      </el-form-item>
      <el-form-item v-else label="商品货号" prop="scope">
        <el-input v-model="form.scope" />
      </el-form-item>
      <el-form-item label="起止日期" prop="timeRange">
        <el-date-picker
          v-model="form.timeRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          size="small"
        />
      </el-form-item>
      <el-form-item label="满减" prop="minus">
        满
        <el-input v-model="form.meet" style="width:100px" type="number" :min="0" />减
        <el-input v-model="form.minus" style="width:100px" type="number" :min="0" />
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input v-model="form.number" />
      </el-form-item>
      <el-form-item prop="use_rule" label="使用规则">
        <el-input
          v-model="form.use_rule"
          type="textarea"
          :autosize="{ minRows: 1, maxRows: 2}"
          placeholder="请输入优惠券使用规则"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addCoupon, getCouponDetail } from '@/api/promotion-mng'
import { getPropClassList } from '@/api/good-mng'
export default {
  props: ['visible', 'id', 'status'],
  data() {
    return {
      form: {
        scope: [],
        coupon_name: null,
        meet: null,
        minus: null,
        number: null,
        timeRange: null,
        use_rule: ''
      },
      rules: {
        scope: [{ required: true, message: '请填写优惠对象', trigger: 'blur' }],
        coupon_name: [
          { required: true, message: '请填写优惠券名称', trigger: 'blur' }
        ],
        minus: [{ required: true, message: '请输入优惠金额', trigger: 'blur' }],
        number: [
          { required: true, message: '请输入优惠券数量', trigger: 'blur' }
        ],
        timeRange: [
          { required: true, message: '请输入有效时间', trigger: 'blur' }
        ],
        use_rule: [
          { required: true, message: '请输入优惠券使用规则', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在60个字符以内', trigger: 'blur' }
        ]
      },
      casProps: {
        expandTrigger: 'hover',
        value: 'id',
        label: 'kind_name',
        children: 'lower',
        multiple: true
      },
      kindList: []
    }
  },
  watch: {
    visible: function(val) {
      if (val) {
        getCouponDetail({ id: this.id }).then(res => {
          if (res.code === 200) {
            this.kindList = res.data.kind
            if (this.id) {
              this.form.coupon_name = res.data.coupon.coupon_name
              this.form.meet = res.data.coupon.meet
              this.form.minus = res.data.coupon.minus
              this.form.number = res.data.coupon.number
              this.form.use_rule = res.data.coupon.use_rule
              this.form.timeRange = [
                res.data.coupon.start_at,
                res.data.coupon.stop_at
              ]
              if (this.status == 1) {
                const scope = res.data.coupon.scope
                console.log(scope)
                for (let k = 0; k < scope.length; k++) {
                  for (let i = 0; i < this.kindList.length; i++) {
                    for (let j = 0; j < this.kindList[i].lower.length; j++) {
                      if (this.kindList[i].lower[j].id == scope[k]) {
                        this.form.scope.push([
                          this.kindList[i].id,
                          this.kindList[i].lower[j].id
                        ])
                        break
                      }
                    }
                  }
                }
              } else {
                this.form.scope = res.data.coupon.scope
              }
            }
          }
        })
      } else {
        this.$refs['couponForm'].resetFields()
      }
    }
  },
  created() {},
  methods: {
    submit() {
      this.$refs['couponForm'].validate(valid => {
        if (valid) {
          console.log(this.form.scope, 'scope')
          const scopeArr = []
          if (this.status == 1) {
            this.form.scope.forEach(item => {
              scopeArr.push(item[1])
            })
          }
          const obj = {
            status: this.status,
            coupon_name: this.form.coupon_name,
            meet: this.form.meet,
            number: this.form.number,
            start_at: this.form.timeRange[0],
            stop_at: this.form.timeRange[1],
            minus: this.form.minus,
            id: this.id ? this.id : null,
            scope: this.status == 1 ? scopeArr : this.form.scope,
            use_rule: this.form.use_rule
          }
          addCoupon(obj).then(res => {
            if (res.code === 200) {
              this.$message({
                message: this.id ? '修改成功' : '添加成功',
                type: 'success'
              })
              this.$emit('close')
            }
          })
        }
      })
    }
  }
}
</script>

<style></style>
